<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">

<h:head>
	<title><h:outputText value="#{tclie.titleCliente}" /></title>
	<h:outputStylesheet library="css" name="styles.css" />
	<h:outputScript name="jquery/jquery-plugins.js" library="primefaces" />
</h:head>

<h:body>
	<h:form id="pcliente">
		<ui:composition template="/plantillas/plantilla.xhtml">
			<ui:define name="body">
				<h:form>
					<br />
					<p:panelGrid columns="1" styleClass="table-out">
						<f:facet name="header">#{tclie.titleCliente}</f:facet>
						<p:row>
							<p:column>
								<center>
									<p:panelGrid styleClass="table-in">

										<p:row>
											<p:column colspan="2">
												<h1>
													<p:outputLabel value="Datos del Cliente" />
												</h1>
											</p:column>
										</p:row>

										<p:row>
											<p:column>
												<p:outputLabel value="Nombres y Apellidos" />
											</p:column>
											<p:column>
												<p:inputText value="#{tclie.cliente.clinom}" size="40" />
											</p:column>
										</p:row>

										<p:row>
											<p:column>
												<p:outputLabel value="Tipo Documento" />
											</p:column>
											<p:column>
												<p:selectOneMenu value="#{tclie.tipoDocumento.codigo}">
													<f:selectItem itemValue="" itemLabel="Seleccione" />
													<f:selectItems value="#{tclie.listadoTipoDocumentoItem}" />
												</p:selectOneMenu>
											</p:column>
										</p:row>

										<p:row>
											<p:column>
												<p:outputLabel value="Número Documento" />
											</p:column>
											<p:column>
												<p:inputText value="#{tclie.cliente.clnide}" size="12" />
											</p:column>
										</p:row>

										<p:row>
											<p:column>
												<p:outputLabel value="Dirección" />
											</p:column>
											<p:column>
												<p:inputText value="#{tclie.cliente.clidir}" size="40" />
											</p:column>
										</p:row>

										<p:row>
											<p:column>
												<p:outputLabel value="Departamento" />
											</p:column>
											<p:column>
												<p:selectOneMenu id="departamento"
													value="#{tclie.departamento.codigo}" style="width:150px"
													height="100" filter="true" filterMatchMode="startsWith">
													<p:ajax listener="#{tclie.onDepartamentoChange}"
														update="provincia" />
													<f:selectItem itemLabel="Seleccione" itemValue="" />
													<f:selectItems value="#{tclie.listadoDepartamentoItem}" />
												</p:selectOneMenu>
											</p:column>
										</p:row>

										<p:row>
											<p:column>
												<p:outputLabel value="Provincia" />
											</p:column>
											<p:column>
												<p:selectOneMenu id="provincia"
													value="#{tclie.provincia.codigo}" style="width:150px"
													height="100" filter="true" filterMatchMode="startsWith">
													<p:ajax listener="#{tclie.onProvinciaChange}"
														update="distrito" />
													<f:selectItem itemLabel="Seleccione" itemValue="" />
													<f:selectItems value="#{tclie.listadoProvinciaItem}" />
												</p:selectOneMenu>
											</p:column>
										</p:row>

										<p:row>
											<p:column>
												<p:outputLabel value="Distrito" />
											</p:column>
											<p:column>
												<p:selectOneMenu id="distrito"
													value="#{tclie.distrito.codigo}" height="100" filter="true"
													filterMatchMode="startsWith">
													<f:selectItem itemLabel="Seleccione" itemValue="" />
													<f:selectItems value="#{tclie.listadoDistritoItem}" />
												</p:selectOneMenu>
											</p:column>
										</p:row>

										<p:row>
											<p:column colspan="2">
												<h1>
													<p:outputLabel value="Datos del la Sesión" />
												</h1>
											</p:column>
										</p:row>

										<p:row>
											<p:column>
												<p:outputLabel value="Correo Electronico" />
											</p:column>
											<p:column>
												<p:inputText value="#{tclie.cliente.clmail}" type=""
													size="40" />
											</p:column>
										</p:row>

										<p:row>
											<p:column>
												<p:outputLabel value="Contraseña" />
											</p:column>
											<p:column>
												<p:password value="#{tclie.usuario.usucon}" />
											</p:column>
										</p:row>

										<p:row>
											<p:column>
												<p:outputLabel value="Confirmar Contraseña" />
											</p:column>
											<p:column>
												<p:password value="#{tclie.usuario.confirmar}" />
											</p:column>
										</p:row>

										<p:row>
											<p:column colspan="2">
												<center>
													<p:commandButton value="Aceptar"
														action="#{tclie.registrar}" update="growl">
													</p:commandButton>
													<p:commandButton value="Cancelar"
														action="#{tclie.cancelar}" />
												</center>
											</p:column>
										</p:row>

									</p:panelGrid>

									<p:growl id="growl" showDetail="true" sticky="true" />
								</center>
							</p:column>
						</p:row>
					</p:panelGrid>
				</h:form>
			</ui:define>
		</ui:composition>
	</h:form>
</h:body>
</html>